<template>
<div></div>
</template>

<script>
//将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref。
import {reactive, toRefs} from "vue";

export default {
  name: "torefs",
  mounted() {
    const state = reactive({
      foo: 1,
      bar: 2
    })
    console.log('state reactive', state)
    /**
     * Proxy {foo: 1, bar: 2}
     [[Handler]]: Object
     [[Target]]: Object
     bar: 2
     foo: 3
     [[Prototype]]: Object
     [[IsRevoked]]: false
     */
    const stateAsRefs = toRefs(state)
    // 把对象的属性值改为ref，和reactive联动
    console.log("stateAsRefs", stateAsRefs)
    /*
    stateAsRefs 的类型:

    {
      foo: Ref<number>,
      bar: Ref<number>
    }
    */

// ref 和原始 property 已经“链接”起来了
    state.foo++
    console.log(stateAsRefs.foo.value) // 2

    stateAsRefs.foo.value++
    console.log(state.foo) // 3
  }
}
</script>

<style scoped>

</style>